<template>
  <div
    v-if="show"
    class="areaBlock"
    :class="{ loadAnim: system.areaBlockLoadAnimation }"
    :style="`
      width: ${d * 50}px; 
      height: ${d * 50}px;
      left: ${x * 50}px;
      top: ${y * 50}px;
    `"
  >
    <Block
      v-for="n in d * d"
      :key="n"
      :x="getBlockX(n - 1)"
      :y="getBlockY(n - 1)"
    />
  </div>
</template>

<script>
import Block from "@/components/world/Block.vue";
import { mapState } from "vuex";

export default {
  props: {
    show: {
      type: Boolean,
      required: true,
    },
    x: {
      type: Number,
      required: true,
    },
    y: {
      type: Number,
      required: true,
    },
  },
  components: {
    Block,
  },
  computed: {
    ...mapState("map", ["system"]),
    d() {
      return this.system.areaBlockDiameter;
    },
    r() {
      return (this.d - 1) / 2;
    },
  },
  methods: {
    getBlockX(index) {
      return this.x - this.r + (index % this.d);
    },
    getBlockY(index) {
      return this.y - this.r + Math.floor(index / this.d);
    },
  },
};
</script>

<style scoped>
.areaBlock {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}

.loadAnim {
  animation: show 300ms ease-out forwards;
}

@keyframes show {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>